<script setup lang="ts">
import type { AppCodeType } from '@apps/_share/enums'
import Language from '@apps/_share/layouts/components/language/index.vue'
import User from '@apps/_share/layouts/components/user/index.vue'
import { MAIN_APP_SLOT_ROUTE_PATH } from '@apps/_share/settings'
import useAppStore from '@apps/_share/store/app'
import useProjectStore from '@apps/_share/store/project'
import useTabStore from '@apps/_share/store/tab'

// const projectStore = useProjectStore()
// const appStore = useAppStore()
// const tabStore = useTabStore()

// const projects = computed(() => projectStore.projects.map(({
//   name,
//   code,
// }) => ({
//   label: name,
//   value: code,
// })))

// function onChangeProject(projectCode: string) {
//   tabStore.removeAllTabs()
//   projectStore.setProjectCode(projectCode)
//   location.href = `${location.origin}${MAIN_APP_SLOT_ROUTE_PATH}/${projectCode}/${appStore.getAppCode}`
// }
</script>

<template>
  <div class="app-header">
    <h1
      font-bold
      text-xl
      flex
      justify-center
      items-center
    >
      国际化平台
    </h1>

    <div class="app-header__right">
      <!-- <BaseSelect
        class="min-w-150px"
        :clearable="false"
        :options="apps"
        @change="onChangeApp"
      /> -->

      <!-- <BaseSelect
        class="min-w-150px"
        :clearable="false"
        :options="projects"
        @change="onChangeProject"
      />

      <ElDivider direction="vertical" /> -->

      <Language />

      <ElDivider direction="vertical" />

      <User />
    </div>
  </div>
</template>

<style lang="less" scoped>
.app-header {
  display: flex;
  align-items: center;

  border-block-end: 1px solid var(--el-menu-border-color);
  gap: 8px;
  padding-block: 12px;
  padding-inline: 12px;
}

.app-header__right {
  display: flex;
  align-items: center;

  column-gap: 12px;
  margin-inline-start: auto;
}
</style>
